<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<comp-quick-navigation v-bind="{data:data}" @cutover="cutover" @map_power="map_power" @to_dial="to_dial" @openWxapp="openWxapp"></comp-quick-navigation>
			<view class="body">
				<specifications-model v-bind="{data:data}" @previewImage="previewImage" @hideAttrPicker="hideAttrPicker" @groupCheck="groupCheck" @attrNumClick="attrNumClick" @dappAttrClick="dappAttrClick" @numberSub="numberSub" @numberBlur="numberBlur" @numberAdd="numberAdd"></specifications-model>
        <view :class="data.show_attr_picker||data.show||data.no_scroll?'no-scroll':''">
            <view style="padding-bottom: 120upx">
							<goods-banner v-bind="{data:data}" @hide="hide" @onGoodsImageClick="onGoodsImageClick" @play="play"></goods-banner>
                <view class="miaosha-bar flex-row" v-if="data.goods&&data.goods.miaosha">
                    <image class="img_bg" :src="data.__wxapp_img.miaosha.ms_activity_bg.url"></image>
                    <view class="activity_box">
                        <view class="time-over-text" v-if="data.miaosha_end_time_over.type==0">距离结束仅剩</view>
                        <view class="time-over-text" v-if="data.miaosha_end_time_over.type==1">距离开始仅剩</view>
                        <view class="timer">
                            <text class="timer-num">{{data.miaosha_end_time_over.h}}</text>
                            <text class="timer-split">:</text>
                            <text class="timer-num">{{data.miaosha_end_time_over.m}}</text>
                            <text class="timer-split">:</text>
                            <text class="timer-num">{{data.miaosha_end_time_over.s}}</text>
                        </view>
                    </view>
                </view>
								<goods-info v-bind="{data:data}" @showDialogBtn="showDialogBtn" @jian="jian" @goodNumChange="goodNumChange" @jia="jia" @showShareModal="showShareModal" @showAttrPicker="showAttrPicker" @getGoodsQrcode="getGoodsQrcode" @shareModalClose="shareModalClose" @close="close" @goodsQrcodeClick="goodsQrcodeClick" @saveGoodsQrcode="saveGoodsQrcode" @goodsQrcodeClose="goodsQrcodeClose" @onShareWebMessage="onShareWebMessage"></goods-info>
                <view class="tab-group">
                    <view class="flex-row tab-group-header">
                        <view @tap="tabSwitch" :class="['flex-grow-1 flex-x-center tab-group-item', data.tab_detail]" data-tab="detail">
                            <text class="flex-y-center">商品详情</text>
                        </view>
                        <view @tap="tabSwitch" :class="['flex-grow-1 flex-x-center tab-group-item', data.tab_comment]" data-tab="comment" v-if="data.__is_comment">
                            <text class="flex-y-center">评价</text>
                        </view>
                    </view>
                    <view class="tab-group-body">
                        <view :class="['tab-group-item', data.tab_detail]">
                            <view class="goods-detail">
															<wx-parse :myNodes="data.detail.nodes"></wx-parse>
                            </view>
                        </view>
                        <view :class="['tab-group-item', data.tab_comment]">
                            <view class="comment-count flex-row">
                                <view class="comment-count-item flex-grow-1 flex-x-center flex-col">
                                    <view>全部</view>
                                    <view>({{data.comment_count.score_all>999?'999+':data.comment_count.score_all}})</view>
                                </view>
                                <view class="comment-count-item flex-grow-1 flex-x-center flex-col">
                                    <view>好评</view>
                                    <view>({{data.comment_count.score_3>999?'999+':data.comment_count.score_3}})</view>
                                </view>
                                <view class="comment-count-item flex-grow-1 flex-x-center flex-col">
                                    <view>中评</view>
                                    <view>({{data.comment_count.score_2>999?'999+':data.comment_count.score_2}})</view>
                                </view>
                                <view class="comment-count-item flex-grow-1 flex-x-center flex-col">
                                    <view>差评</view>
                                    <view>({{data.comment_count.score_1>999?'999+':data.comment_count.score_1}})</view>
                                </view>
                            </view>
                            <view class="comment-list">
                                <view class="comment-item flex-row" v-for="(item,index) in data.comment_list" :key="item.id">
                                    <view class="flex-grow-0" style="overflow: visible">
                                        <image mode="aspectFill" :src="item.avatar_url" style="width: 70upx;height: 70upx;border-radius: 1000upx"></image>
                                    </view>
                                    <view class="flex-grow-1">
                                        <view class="flex-row mb-20">
                                            <view class="flex-grow-1 flex-y-center nickname">{{item.nickname}}</view>
                                            <view class="flex-grow-0 flex-y-center addtime">{{item.addtime}}</view>
                                        </view>
                                        <view class="mb-20">{{item.content}}</view>
                                        <view class="pic-list" v-if="item.pic_list&&item.pic_list.length>0">
                                            <image @tap="commentPicView" class="pic-item" :data-index="index" :data-pic-index="pic_index" mode="aspectFill" :src="pic" v-for="(pic,pic_index) in item.pic_list" :key="pic.id"></image>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
						<goods-buy v-bind="{data:data}" @goHome="goHome" @favoriteRemove="favoriteRemove" @favoriteAdd="favoriteAdd" @kfMessage="kfMessage" @callPhone="callPhone" @addCart="addCart" @buyNow="buyNow" @bespeakNow="bespeakNow" @onlyBuy="onlyBuy"></goods-buy>
						<get-coupon v-bind="{data:data}" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox"></get-coupon>
        </view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	import specificationsModel from '../../../components/goods/specifications_model.vue'
	import goodsBanner from '../../../components/goods/goods_banner.vue'
	import goodsInfo from '../../../components/goods/goods_info.vue'
	import goodsBuy from '../../../components/goods/goods_buy.vue'
	import getCoupon from '../../../components/get-coupon/get-coupon.vue'
	var t = require("../../../utils/helper.js"), a = require("../../../wxParse/wxParse.js"), e = require("../../../components/goods/goods_banner.js"), o = require("../../../components/goods/specifications_model.js"), i = require("../../../components/goods/goods_info.js"), s = require("../../../components/goods/goods_buy.js"), r = 1, n = !1, d = !0, c = 0;
	export default {
		components:{specificationsModel,goodsBanner,goodsInfo,goodsBuy,getCoupon},
		data() {
			return {
				data: {
        pageType: "MIAOSHA",
        id: null,
        goods: {},
        show_attr_picker: !1,
        form: {
            number: 1
        },
        tab_detail: "active",
        tab_comment: "",
        comment_list: [],
        comment_count: {
            score_all: 0,
            score_3: 0,
            score_2: 0,
            score_1: 0
        },
        autoplay: !1,
        hide: "hide",
        show: !1,
        x: this.getApp.core.getSystemInfoSync().windowWidth,
        y: this.getApp.core.getSystemInfoSync().windowHeight - 20,
        miaosha_end_time_over: {
            h: "--",
            m: "--",
            s: "--",
            type: 0
        },
				detail: {}
    },
			};
		},
		onLoad: function(a) {myVue = this;
        myVue.getApp.page.onLoad(this, a), c = 0, r = 1, n = !1, d = !0;
        var e = a.user_id, o = decodeURIComponent(a.scene), i = 0;
        if (void 0 !== e) e; else if ("undefined" == typeof my) {
            if (void 0 !== a.scene) {
                i = 1;
                var o = decodeURIComponent(a.scene), s = t.scene_decode(o);
                s.uid && s.gid ? (s.uid, a.id = s.gid) : o;
            }
        } else if (null !== myVue.getApp.query) {
            i = 1;
            var p = myVue.getApp.query;
            myVue.getApp.query = null, a.id = p.gid;
        }
        var g = this;
        g.setData({
            id: a.id,
            scene_type: i
        }), g.getGoods(), g.getCommentList();
    },
		onReady: function(t) {
        myVue.getApp.page.onReady(this);
    },
    onShow: function(t) {
        myVue.getApp.page.onShow(this), e.init(this), o.init(this), i.init(this), s.init(this);
    },
    onHide: function(t) {
        myVue.getApp.page.onHide(this);
    },
    onUnload: function(t) {
        myVue.getApp.page.onUnload(this);
    },
    onPullDownRefresh: function(t) {
        myVue.getApp.page.onPullDownRefresh(this);
    },
    onReachBottom: function(t) {
        myVue.getApp.page.onReachBottom(this), this.getCommentList(!0);
    },
    onShareAppMessage: function(t) {
        myVue.getApp.page.onShareAppMessage(this);
        var a = this, e = myVue.getApp.getUser();
        return {
            path: "/pages/miaosha/details/details?id=" + this.data.id + "&user_id=" + e.id,
            success: function(t) {
                1 == ++c && myVue.getApp.shareSendCoupon(a);
            },
            title: a.data.goods.name,
            imageUrl: a.data.goods.pic_list[0]
        };
    },
		methods: {
			getGoods: function() {
        var t = this, e = {};
        t.data.id && (e.id = t.data.id), t.data.goods_id && (e.goods_id = t.datat.goods_id), 
        e.scene_type = t.data.scene_type, myVue.getApp.request({
            url: myVue.getApp.api.miaosha.details,
            data: e,
            success: function(e) {
                if (0 == e.code) {
                    var o = e.data.detail;
                    a.wxParse("detail", "html", o, t);
                    var i = e.data, s = e.data.miaosha, r = [];
                    for (var n in i.pic_list) r.push(i.pic_list[n].pic_url);
                    i.pic_list = r, i.min_price = s.new_small_price, i.sales_volume = s.sell_num, t.setData({
                        goods: i,
                        attr_group_list: e.data.attr_group_list,
                        miaosha_data: e.data.miaosha.miaosha_data
                    }), 1 == t.data.scene_type && t.setData({
                        id: e.data.miaosha.miaosha_goods_id
                    }), t.data.goods.miaosha && t.setMiaoshaTimeOver(), t.selectDefaultAttr();
                }
                1 == e.code && t.getApp.core.showModal({
                    title: "提示",
                    content: e.msg,
                    showCancel: !1,
                    success: function(t) {
                        t.confirm && t.getApp.core.redirectTo({
                            url: "/pages/index/index"
                        });
                    }
                });
            }
        });
    },
    selectDefaultAttr: function() {
        var t = this;
        if (t.data.goods && 0 === t.data.goods.use_attr) {
            for (var a in t.data.attr_group_list) for (var e in t.data.attr_group_list[a].attr_list) 0 == a && 0 == e && (t.data.attr_group_list[a].attr_list[e].checked = !0);
            t.setData({
                attr_group_list: t.data.attr_group_list
            });
        }
    },
    getCommentList: function(t) {
        var a = this;
        t && "active" != a.data.tab_comment || n || d && (n = !0, myVue.getApp.request({
            url: myVue.getApp.api.miaosha.comment_list,
            data: {
                goods_id: a.data.id,
                page: r
            },
            success: function(e) {
                0 == e.code && (n = !1, r++, a.setData({
                    comment_count: e.data.comment_count,
                    comment_list: t ? a.data.comment_list.concat(e.data.list) : e.data.list
                }), 0 == e.data.list.length && (d = !1));
            }
        }));
    },
    addCart: function() {
        this.submit("ADD_CART");
    },
    buyNow: function() {
        this.data.goods.miaosha ? this.submit("BUY_NOW") : myVue.getApp.core.showModal({
            title: "提示",
            content: "秒杀商品当前时间暂无活动",
            showCancel: !1,
            success: function(t) {}
        });
    },
    submit: function(t) {
        var a = this;
        if (!a.data.show_attr_picker) return a.setData({
            show_attr_picker: !0
        }), !0;
        if (a.data.miaosha_data && a.data.miaosha_data.rest_num > 0 && a.data.form.number > a.data.miaosha_data.rest_num) return myVue.getApp.core.showToast({
            title: "商品库存不足，请选择其它规格或数量",
            image: "/static/images/icon-warning.png"
        }), !0;
        if (1e3 * this.data.goods.miaosha.begin_time > Date.parse(new Date())) return myVue.getApp.core.showToast({
            title: "活动未开始",
            image: "/static/images/icon-warning.png"
        }), !0;
        if (a.data.form.number > a.data.goods.num) return myVue.getApp.core.showToast({
            title: "商品库存不足，请选择其它规格或数量",
            image: "/static/images/icon-warning.png"
        }), !0;
        var e = a.data.attr_group_list, o = [];
        for (var i in e) {
            var s = !1;
            for (var r in e[i].attr_list) if (e[i].attr_list[r].checked) {
                s = {
                    attr_id: e[i].attr_list[r].attr_id,
                    attr_name: e[i].attr_list[r].attr_name
                };
                break;
            }
            if (!s) return myVue.getApp.core.showToast({
                title: "请选择" + e[i].attr_group_name,
                image: "/static/images/icon-warning.png"
            }), !0;
            o.push({
                attr_group_id: e[i].attr_group_id,
                attr_group_name: e[i].attr_group_name,
                attr_id: s.attr_id,
                attr_name: s.attr_name
            });
        }
        "ADD_CART" == t && (myVue.getApp.core.showLoading({
            title: "正在提交",
            mask: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.cart.add_cart,
            method: "POST",
            data: {
                goods_id: a.data.id,
                attr: JSON.stringify(o),
                num: a.data.form.number
            },
            success: function(t) {
                a.getApp.core.showToast({
                    title: t.msg,
                    duration: 1500
                }), a.getApp.core.hideLoading(), a.setData({
                    show_attr_picker: !1
                });
            }
        })), "BUY_NOW" == t && (a.setData({
            show_attr_picker: !1
        }), myVue.getApp.core.redirectTo({
            url: "/pages/miaosha/order-submit/order-submit?goods_info=" + JSON.stringify({
                goods_id: a.data.id,
                attr: o,
                num: a.data.form.number
            })
        }));
    },
    favoriteAdd: function() {
        var t = this;
        myVue.getApp.request({
            url: myVue.getApp.api.user.favorite_add,
            method: "post",
            data: {
                goods_id: t.data.goods.id
            },
            success: function(a) {
                if (0 == a.code) {
                    var e = t.data.goods;
                    e.is_favorite = 1, t.setData({
                        goods: e
                    });
                }
            }
        });
    },
    favoriteRemove: function() {
        var t = this;
        myVue.getApp.request({
            url: myVue.getApp.api.user.favorite_remove,
            method: "post",
            data: {
                goods_id: t.data.goods.id
            },
            success: function(a) {
                if (0 == a.code) {
                    var e = t.data.goods;
                    e.is_favorite = 0, t.setData({
                        goods: e
                    });
                }
            }
        });
    },
    tabSwitch: function(t) {
        var a = this;
        "detail" == t.currentTarget.dataset.tab ? a.setData({
            tab_detail: "active",
            tab_comment: ""
        }) : a.setData({
            tab_detail: "",
            tab_comment: "active"
        });
    },
    commentPicView: function(t) {
        var a = this, e = t.currentTarget.dataset.index, o = t.currentTarget.dataset.picIndex;
        myVue.getApp.core.previewImage({
            current: a.data.comment_list[e].pic_list[o],
            urls: a.data.comment_list[e].pic_list
        });
    },
		play: function(t) {
        var a = t.target.dataset.url;
        this.setData({
            url: a,
            hide: "",
            show: !0
        }), myVue.getApp.core.createVideoContext("video").play();
    },
    close: function(t) {
        if ("video" == t.target.id) return !0;
        this.setData({
            hide: "hide",
            show: !1
        }), myVue.getApp.core.createVideoContext("video").pause();
    },
    hide: function(t) {
        0 == t.detail.current ? this.setData({
            img_hide: ""
        }) : this.setData({
            img_hide: "hide"
        });
    },
    closeCouponBox: function(t) {
        this.setData({
            get_coupon_list: ""
        });
    },
    setMiaoshaTimeOver: function() {
        function t() {
            var t = e.data.goods.miaosha.end_time - e.data.goods.miaosha.now_time;
            t = t < 0 ? 0 : t, e.data.goods.miaosha.now_time++, e.setData({
                goods: e.data.goods,
                miaosha_end_time_over: a(t)
            });
        }
        function a(t) {
            var a = parseInt(t / 3600), e = parseInt(t % 3600 / 60), o = t % 60, i = 0;
            return a >= 1 && (a -= 1, i = 1), {
                h: a < 10 ? "0" + a : "" + a,
                m: e < 10 ? "0" + e : "" + e,
                s: o < 10 ? "0" + o : "" + o,
                type: i
            };
        }
        var e = this;
        t(), setInterval(function() {
            t();
        }, 1e3);
    },
    to_dial: function(t) {
        var a = this.data.dapp.contact_tel;
        myVue.getApp.core.makePhoneCall({
            phoneNumber: a
        });
    },
    onShareWebMessage: function(t) {
        myVue.getApp.page.onShareAppMessage(this);
        var a = this, e = myVue.getApp.getUser();
				this.$webShare({
					path: "/pages/miaosha/details/details?id=" + this.data.id + "&user_id=" + e.id,
					title: a.data.goods.name,
					imageUrl: a.data.goods.pic_list[0]
				}).then(function() {
					
				})
    },
		},
	}
</script>

<style scoped>

view {
    overflow: visible;
}

.no-scroll {
    height: 100%;
    overflow-y: hidden;
}

.bar-bottom {
    position: fixed;
    bottom: var(--window-bottom);
    left: 0;
    z-index: 999;
    width: 100%;
    box-shadow: 0 0 3upx rgba(0,0,0,0.2);
    height: 110upx;
}

.bar-bottom-btn {
    border: none;
    background: #fff;
    font-size: 0;
    line-height: normal;
    padding: 0;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
    position: inherit;
    border-left: 1upx solid #e3e3e3;
    width: 110upx;
}

.bar-bottom-btn:after {
    display: none;
}

.bar-bottom-btn:first-child {
    border-left: none;
}

.bar-bottom-btn.button-hover {
    background: rgba(255,255,255,0.85);
}

.bar-bottom-btn view {
    text-align: center;
    width: 100%;
}

.bar-bottom-btn image {
    width: 38upx;
    height: 38upx;
    margin-bottom: 0upx;
}

.bar-bottom-btn text {
    font-size: 8pt;
    color: #888;
    display: block;
}

.bar-bottom .add-cart {
    background: #f39800;
    color: #fff;
}

.bar-bottom .buy-now {
    background: #ff4544;
    color: #fff;
}

.goods-detail {
    box-sizing: border-box;
    padding: 24upx 0;
    background: #fff;
}

.goods-detail text,.goods-detail image,.goods-detail view {
    box-sizing: border-box;
    max-width: 100%;
}

.tab-group .tab-group-header {
    background: #fff;
    border-bottom: 1upx solid #e3e3e3;
}

.tab-group .tab-group-header .tab-group-item text {
    height: 100upx;
    border-bottom: 2upx solid transparent;
}

.tab-group .tab-group-header .tab-group-item.active text {
    color: #ff4544;
    border-bottom-color: #ff4544;
}

.tab-group .tab-group-body .tab-group-item {
    display: none;
}

.tab-group .tab-group-body .tab-group-item.active {
    display: block;
}

.comment-count {
    background: #fff;
    margin-bottom: 20upx;
}

.comment-count .comment-count-item {
    text-align: center;
    padding: 20upx 0;
    font-size: 9pt;
}

.comment-item {
    background: #fff;
    border-bottom: 1upx solid #e3e3e3;
    padding: 32upx 24upx;
}

.comment-item .nickname {
    padding-left: 24upx;
    height: 70upx;
    font-weight: bolder;
}

.comment-item .addtime {
    color: #888;
}

.comment-item .pic-list {
    margin-left: -8upx;
    margin-top: -8upx;
}

.comment-item .pic-item {
    width: 200upx;
    height: 200upx;
    margin-left: 8upx;
    margin-top: 8upx;
    display: inline-block;
    float: left;
}

.comment-item .score-tag {
    display: inline-block;
    background: #eee;
    font-size: 9pt;
    padding: 4upx 12upx;
    border-radius: 5upx;
}

.hide {
    display: none;
}

.miaosha-bar {
    height: 88upx;
    position: relative;
}

.miaosha-bar .img_bg {
    width: 100%;
    height: 100%;
}

.miaosha-bar .activity_box {
    position: absolute;
    right: 50upx;
}

.miaosha-bar-right {
    width: 240upx;
}

.miaosha-bar-right>view {
    width: 100%;
}

.miaosha-bar .time-over-text {
    margin-top: 10upx;
    text-align: center;
    font-size: 7pt;
    color: #ff4544;
    line-height: 1;
}

.miaosha-bar .timer {
    text-align: center;
}

.miaosha-bar .timer-num {
    background: #fff;
    font-size: 7pt;
    color: #555;
    width: 44upx;
    height: 40upx;
    line-height: 40upx;
    text-align: center;
    display: inline-block;
    border-radius: 10upx;
}

.miaosha-bar .timer-split {
    color: #fff;
    display: inline-block;
    height: 40upx;
    line-height: 40upx;
    margin: 0 8upx;
}
</style>
